<template>
  <div class="project-manager">
    <div class="section-header">
      <h2>项目管理</h2>
      <el-button type="primary" size="small" @click="createProject">创建项目</el-button>
    </div>

    <el-input
      v-model="searchQuery"
      placeholder="搜索项目..."
      prefix-icon="Search"
      clearable
      class="search-input"
    />

    <div class="project-grid">
      <el-empty v-if="projects.length === 0" description="暂无项目" />
      <el-card
        v-for="project in filteredProjects"
        :key="project.id"
        class="project-card"
        shadow="hover"
        @click="selectProject(project)"
      >
        <template #header>
          <div class="card-header">
            <span>{{ project.name }}</span>
            <div class="card-actions">
              <el-dropdown trigger="click" @command="handleCommand($event, project)">
                <el-button type="text">
                  <el-icon><More /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="edit">编辑</el-dropdown-item>
                    <el-dropdown-item command="duplicate">复制</el-dropdown-item>
                    <el-dropdown-item command="export">导出</el-dropdown-item>
                    <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </template>
        <div class="project-thumbnail">
          <el-image 
            :src="project.thumbnail || 'https://placeholder.pics/svg/300x200/DEDEDE/555555/项目缩略图'" 
            fit="cover"
          />
        </div>
        <div class="project-info">
          <p class="project-desc">{{ project.description || '暂无描述' }}</p>
          <p class="project-meta">
            <span>创建时间: {{ formatDate(project.createTime) }}</span>
            <span>上次修改: {{ formatDate(project.updateTime) }}</span>
          </p>
        </div>
      </el-card>
    </div>

    <el-dialog
      v-model="dialogVisible"
      title="创建新项目"
      width="500px"
    >
      <el-form ref="projectForm" :model="newProject" label-width="100px" :rules="rules">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="newProject.name" />
        </el-form-item>
        <el-form-item label="项目描述" prop="description">
          <el-input v-model="newProject.description" type="textarea" />
        </el-form-item>
        <el-form-item label="模板">
          <el-radio-group v-model="newProject.template">
            <el-radio label="blank">空白项目</el-radio>
            <el-radio label="mobile">移动端应用</el-radio>
            <el-radio label="web">Web 应用</el-radio>
            <el-radio label="dashboard">管理后台</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, More } from '@element-plus/icons-vue'

// 模拟项目数据
const projects = ref([
  {
    id: 1,
    name: '移动端电商应用',
    description: '移动端电商应用原型设计，包含首页、商品列表、商品详情、购物车、订单等页面',
    thumbnail: '',
    createTime: new Date('2024-03-20'),
    updateTime: new Date('2024-03-25'),
    template: 'mobile'
  },
  {
    id: 2,
    name: '企业管理后台',
    description: '企业管理后台界面设计，包含数据分析、用户管理、内容管理等功能模块',
    thumbnail: '',
    createTime: new Date('2024-03-15'),
    updateTime: new Date('2024-03-22'),
    template: 'dashboard'
  }
])

const searchQuery = ref('')
const dialogVisible = ref(false)
const newProject = ref({
  name: '',
  description: '',
  template: 'blank'
})

const rules = {
  name: [
    { required: true, message: '请输入项目名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ]
}

const filteredProjects = computed(() => {
  if (!searchQuery.value) return projects.value
  return projects.value.filter(project => 
    project.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    project.description.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

const createProject = () => {
  dialogVisible.value = true
  newProject.value = {
    name: '',
    description: '',
    template: 'blank'
  }
}

const submitForm = () => {
  const id = projects.value.length > 0 ? Math.max(...projects.value.map(p => p.id)) + 1 : 1
  const now = new Date()
  projects.value.push({
    id,
    name: newProject.value.name,
    description: newProject.value.description,
    thumbnail: '',
    createTime: now,
    updateTime: now,
    template: newProject.value.template
  })
  
  ElMessage.success('项目创建成功')
  dialogVisible.value = false
}

const selectProject = (project) => {
  // 选择项目，实际应用中可能需要跳转到设计画布
  ElMessage.success(`已选择项目: ${project.name}`)
}

const handleCommand = (command, project) => {
  switch (command) {
    case 'edit':
      ElMessage.info(`编辑项目: ${project.name}`)
      break
    case 'duplicate':
      const newId = Math.max(...projects.value.map(p => p.id)) + 1
      const clonedProject = { 
        ...project, 
        id: newId, 
        name: `${project.name} (副本)`,
        createTime: new Date(),
        updateTime: new Date()
      }
      projects.value.push(clonedProject)
      ElMessage.success('项目已复制')
      break
    case 'export':
      ElMessage.info('导出功能开发中')
      break
    case 'delete':
      ElMessageBox.confirm(
        `确定要删除项目 "${project.name}" 吗？此操作不可恢复。`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        projects.value = projects.value.filter(p => p.id !== project.id)
        ElMessage.success('项目已删除')
      }).catch(() => {})
      break
  }
}
</script>

<style scoped>
.project-manager {
  padding: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.search-input {
  margin-bottom: 24px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.project-card {
  transition: transform 0.3s;
  cursor: pointer;
}

.project-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.project-thumbnail {
  height: 160px;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 12px;
}

.project-info {
  color: #606266;
}

.project-desc {
  margin: 0 0 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.project-meta {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #909399;
}
</style> 